<template>
<div class="tag">
  <el-tag
      v-for="(tag,index) in state.tags"
      :key="tag.name"
      :closable="tag.name!=='AdHome'"
      :type="$route.name === tag.name?'':'info'"
      size="small"
      :effect="$route.name === tag.name?'dark':'plain'"
      @click="changeMenu(tag)"
      @close="handleClose(tag,index)">
    {{tag.label}}
  </el-tag>
</div>
</template>

<script setup>
import {computed, reactive} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
const store = useStore()
const router = useRouter()
const route = useRoute()
const changeMenu = (item) => {
  router.push({name:item.name})
  store.commit("selectMenu", item)
}
const handleClose = (tag,index) =>{
  let length = state.tags.length - 1;
  store.commit("closeTag", tag)
  //  判断是否是最后一个
  //  第一种情况
  //  删除的不是选中的不用跳转
  if(tag.name !== route.name) {
    return;
  }
  //删除的是最后一个，且是当前选中的
  if(index === length) {
    //  往左边跳转
    router.push({name:state.tags[index - 1].name})
    store.commit("selectMenu",state.tags[index - 1]);
  } else {
    //删除的不是最后一个，且是当前选中的
    //  忘右边跳转
    router.push({name:state.tags[index].name})
    store.commit("selectMenu",state.tags[index]);
  }
}
const state = reactive({
  tags:computed(()=>store.state.tabList)
})
</script>

<style lang="less" scoped>
.tag {
  position: fixed;
  width: 100%;
  z-index: 998;
  top: 70px;
  height: 35px;
  line-height: 32px;
  background-color: #fff;
  box-shadow:
      0px 5.2px 3.9px -7px rgba(0, 0, 0, 0.08),
      0px 11px 11px -7px rgba(0, 0, 0, 0.27);
  .el-tag {
    margin-right: 8px;
    cursor: pointer;
  }
  .el-tag:first-child {
    margin-left: 20px;
  }
}
</style>